<template>
    <div class="goodsinfoContainer">
        <!-- 轮播图 -->
          <swipe :speed="3000" :swipeList="swipeList"></swipe>
        <!-- 商品信息区 -->
       <div class="goodsInfo">
           <p class="price">
               <span class="sellPrice">
                   <span>￥</span>
                   {{goodsInfo.sell_price}}
               </span>
               <span class="marcketPriec">
                   <label class="lb">商场价：</label>
                    {{goodsInfo.market_price}}
               </span>
           </p>
           <p class="title">{{goodsInfo.tille}}</p>
           <p class="abstract">{{goodsInfo.abstract}}</p>
           <p class="add_time">
               <label class="lb">发布时间：</label>
               {{goodsInfo.add_time | dateFormat}}
               </p>
           <p class="stock">
               <span class="">
                   <label class="lb">库存：</label>
                   {{goodsInfo.stock}}
               </span>
               <span>
                   <label class="lb">关注度：</label>
                   {{goodsInfo.click_count}}
               </span>
            </p>
           <p class="count">
               <label class="lb">购买数量：</label>
               <numberbox :min="1" :max="goodsInfo.stock" :initCount="1" @getCount ="getGoodsCount" :goodsId="this.goodsId" :isChangeStore="false"></numberbox>
              
           </p>
           <p class="btn">
              <button type="button" class="mui-btn mui-btn-warning" @click="addToCart">
					加入购物车
				</button>
                <button type="button" class="mui-btn mui-btn-danger">
					立即购买
				</button>
           </p>
       </div>
        <!-- 卖家信息区 -->
         <div class="sellerInfo">
             <h3>卖家信息</h3>
             <p class="seller">
                 <label class="lb">卖家：</label>
                 {{goodsInfo.seller}}
             </p>
             <p class="seller_phone">
                 <label class="lb">卖家电话：</label>
                 {{goodsInfo.seller_phone}}
             </p>
         </div>
        <!-- 商品详情区 -->
          <div class="imgInfo">
              <ul>
                  <li v-for=" item in swipeList" :key="item.index">
                      <img :src="item.img_url" alt="">
                  </li>
              </ul>
          </div>
        <!-- 评论区 -->
        <comment :id='goodsId'></comment>
    </div>
</template>
<script>
import swipe from '../subComponemts/swipe.vue'
import Toast from 'mint-ui'
import numberbox from '../subComponemts/numberbox.vue'
import comment from '../subComponemts/comment.vue'
export default {
    data(){
       return{
           swipeList:[],
           goodsId:this.$route.params.id,
           goodsInfo:{},
           goodsCount:1,
       }
    },
    methods:{
      getSwipeData(){
          this.$ajax({
            mounted:'get',
            url:'/thumbs/'+this.goodsId,
          }).
          then(response =>{
            var data =response.data;
            if(data.Status == 0){
                this.swipeList = data.Data;
                console.log(this.swipeList)
            }else{
                Toast('无法获取商品数据')
            }
          })
      },
      getGoodsInfo(){
          this.$ajax({
           method:'get',
           url:'/goods/goodsinfo',
           params:{
               goodsid:this.goodsId,
           }
          }).
          then(response =>{
             var data = response.data;
             if(data.Status ==0){
                 this.goodsInfo = data.Data[0];
             }else{
                 Toast('无法获取服务端商品数据')
             }
          })
      },
      addToCart(){
           var goods = {
               id:this.goodsId,
               img_url:this.goodsInfo.img_url,
               title:this.goodsInfo.title,
               price:this.goodsInfo.sell_price,
               count:this.goodsCount,
               stock:this.goodsInfo.stock,
           }
        //   this.$store.state.cart.push(goods);
        //  this.$
        this.$store.commit('addToCart',goods);
        // console.log(this.$store.state.cart)
      },
      getGoodsCount(count){
           this.getGoodsCount = count;
      }
    },
    created(){
     this.getSwipeData();
     this.getGoodsInfo();
    },
    watch:{//用watch监听input中数据的变化，监听currentCount数值的变化
         'currentCount':function(nweValue,oldValue){
             this.$emit('getCount',nweValue);
         }
    },
components:{
  swipe,
  numberbox,
  comment,
}
}
</script>
<style lang="less">
.goodsinfoContainer{
    padding: 8px;
    .goodsInfo{
        padding: 5px;
        background-color: #fff;
        border-radius: 5px;
        margin-bottom: 10px;
        p{
            font-size: 14px;
            line-height: 10px;
            color: #333;
            margin: 20px;
            label.lb{
                color: #999;
                margin-right: 20px;
            }
        }
        .price{
            .sellPrice{
               color: #ce0000;
                font-size: 28px;
                font-weight: bold;
                margin-right: 20px;
                span{
                    font-size: 12px;
                }
            }
            .marcketPriec{
               text-decoration: line-through;
               .lb{
                   margin: 0;
               } 
            }
        }
        .title{
            font-size: 16px;
            font-weight: bold;
        }
        .abstract{
            font-size:15px ;
            line-height: 20px;
        }
        .stock{
            margin-right: 20px;
        }
        .btn{
           .mui-btn{
            margin-right: 20px;
        }
        }
       
    }
    .sellerInfo{
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        h3{
            font-size: 14px;
            color: #999;
            margin-bottom: 20px;
        }
        p{
            color: #333;
            label{
                color:#999;
                margin-right: 20px;
            }
        }
    }
    .imgInfo{
        background-color: #fff;
        border-radius: 5px;
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
            li{
                width: 100%;
                img{
                    width: 100%;
                }
            }
        }
    }
}
</style>